<template>
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="visible">
      <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"
               :disabled="method==='view'"
               label-width="120px">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="举报人" prop="nikeName">
              <el-input v-model="inputForm.nikeName" placeholder="请填写举报人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="举报人电话" prop="userPhone">
              <el-input v-model="inputForm.userPhone" placeholder="请填写举报人电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被举报人" prop="bnikeName">
              <el-input v-model="inputForm.bnikeName" placeholder="被举报人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被举报人电话" prop="buserPhone">
              <el-input v-model="inputForm.buserPhone" placeholder="被举报人电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="举报类型" prop="reportType" :rules="[]">
              <el-input v-model="inputForm.reportType" placeholder="请填写举报类型"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="举报说明" prop="reportContent" :rules="[]">
              <el-input type="textarea" v-model="inputForm.reportContent" placeholder="请填写举报说明"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="this.inputForm.image">
            <el-form-item label="举报图片" prop="image">
              <el-upload
                ref="image"
                v-if="visible"
                list-type="picture-card"
                :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/reportinfo/tReportInfo`"
                :headers="{ token: $cookie.get('token') }"
                :on-preview="
                  (file, fileList) => {
                    $alert(
                      `<img style='width:100%' src=' ${(file.response && file.response.url) || file.url}'/>`,
                      {
                        dangerouslyUseHTMLString: true,
                        showConfirmButton: false,
                        closeOnClickModal: true,
                        customClass: 'showPic',
                      }
                    );
                  }
                "
                :on-success="
                  (response, file, fileList) => {
                    inputForm.image = fileList
                      .map(
                        (item) =>
                          (item.response && item.response.url) || item.url
                      )
                      .join('|');
                  }
                "
                :on-remove="
                  (file, fileList) => {
                    $http
                      .post(
                        `/sys/file/webupload/deleteByUrl?url=${
                          (file.response && file.response.url) || file.url
                        }`
                      )
                      .then(({ data }) => {
                        $message.success(data.msg);
                      });
                    inputForm.image = fileList
                      .map((item) => item.url)
                      .join('|');
                  }
                "
                :before-remove="
                  (file, fileList) => {
                    return $confirm(`确定移除 ${file.name}？`);
                  }
                "
                multiple
                :limit="1"
                :on-exceed="
                  (files, fileList) => {
                    $message.warning(
                      `当前限制选择 1 个文件，本次选择了 ${
                        files.length
                      } 个文件，共选择了 ${
                        files.length + fileList.length
                      } 个文件`
                    );
                  }
                "
                :file-list="imageArra"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核状态" prop="auditStatus" :rules="[]">
              <el-tag type="danger" v-if="this.inputForm.auditStatus == 1">待审核</el-tag>
              <el-tag type="success" v-if="this.inputForm.auditStatus == 2">已审核</el-tag>
              <el-tag type="success" v-if="this.inputForm.auditStatus == 4">已拒绝</el-tag>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="备注信息" prop="remarks" :rules="[]">
              <el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写备注信息"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button type="success" v-if="this.inputForm.auditStatus == 1" @click="audit(1,2)" v-noMoreClick plain>通过</el-button>
      <el-button type="danger" v-if="this.inputForm.auditStatus == 1" @click="jj(1,4)" v-noMoreClick plain>拒绝</el-button>
      <el-button @click="visible = false">关闭</el-button>
<!--      <el-button type="primary"  @click="doSubmit()" v-noMoreClick>确定</el-button>-->
    </span>
    </el-dialog>
  </div>
</template>

<script>
import GridSelect from '@/components/gridSelect'

export default {
  data() {
    return {
      title: '',
      method: '',
      visible: false,
      loading: false,
      imageArra: [],
      inputForm: {
        id: '',
        agent: {
          id: ''
        },
        image: '',
        reportType: '',
        reportContent: '',
        auditStatus: '',
        remarks: ''
      }
    }
  },
  components: {
    GridSelect
  },
  methods: {
    init(method, id) {
      this.method = method
      this.inputForm.id = id
      if (method === 'add') {
        this.title = `新建举报`
      } else if (method === 'edit') {
        this.title = '修改举报'
      } else if (method === 'view') {
        this.title = '查看举报'
      }

      this.visible = true
      this.loading = false
      this.imageArra = []
      this.$nextTick(() => {
        this.$refs.inputForm.resetFields()
        if (method === 'edit' || method === 'view') { // 修改或者查看
          this.loading = true
          this.$http({
            url: `/reportinfo/tReportInfo/queryById?id=${this.inputForm.id}`,
            method: 'get'
          }).then(({data}) => {
            this.inputForm = this.recover(this.inputForm, data.tReportInfo)
            this.inputForm.image.split('|').forEach((item) => {
              if (item.trim().length > 0) {
                this.imageArra.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item})
              }
            })
            this.loading = false
          })
        }
      })
    },
    initView(method, id) {
      this.method = method
      this.active = 1
      this.inputForm.id = id
      if (method === 'add') {
        this.inputForm.furniture = []
        this.floor1 = '';
        this.floor2 = '';
        this.floor3 = '';
        this.title = `新建举报详情`
      } else if (method === 'edit') {
        this.title = '修改举报详情'
      } else if (method === 'view') {
        this.title = '查看举报详情'
      }
      this.houseImageArra = []
      this.houseVideoArra = []
      this.houseTypeImageArra = []
      this.visible = true
      this.loading = false
      this.$nextTick(() => {
        this.$refs.inputForm.resetFields()
        if (method === 'edit' || method === 'view') { // 修改或者查看
          this.loading = true
          this.$http({
            url: `/houseinfo/tHouseInfo/queryById?id=${this.inputForm.id}`,
            method: 'get'
          }).then(({data}) => {
            console.log(data)
            this.inputForm = this.recover(this.inputForm, data.tHouseInfo)
            if (data.tHouseInfo.furniture) {
              this.inputForm.furniture = data.tHouseInfo.furniture.split(",");
            }
            this.initMap(this.inputForm.longiistude, this.inputForm.latitude);
            if (this.inputForm.floor) {
              var result = this.inputForm.floor.split(",");
              this.floorType = result[0];
              if (this.floorType == 1) {//单层
                this.floor1 = result[1];
                this.floor3 = result[2];
              }
              if (this.floorType == 2) {//多层
                this.floor1 = result[1];
                this.floor2 = result[2];
                this.floor3 = result[3];
              }
              if (this.floorType == 3) {//独栋
                this.floor3 = result[1];
              }

            }
            if (this.inputForm.useTerm) {
              var result = this.inputForm.useTerm.split(",");
              this.useTerm1 = result[0];
              this.useTerm2 = result[1];
            }
            if (this.inputForm.houseImage) {
              this.inputForm.houseImage.split('|').forEach((item) => {
                if (item.trim().length > 0) {
                  this.houseImageArra.push({
                    name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)),
                    url: item
                  })
                }
              })
            }
            if (this.inputForm.houseVideo) {
              this.inputForm.houseVideo.split('|').forEach((item) => {
                if (item.trim().length > 0) {
                  this.houseVideoArra.push({
                    name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)),
                    url: item
                  })
                }
              })
            }
            if (this.inputForm.houseTypeImage) {
              this.inputForm.houseTypeImage.split('|').forEach((item) => {
                if (item.trim().length > 0) {
                  this.houseTypeImageArra.push({
                    name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)),
                    url: item
                  })
                }
              })
            }
            this.loading = false
          })
        } else {
          this.initMap()
        }
      })
    },

    // 表单提交
    doSubmit() {
      this.$refs['inputForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http({
            url: `/reportinfo/tReportInfo/save`,
            method: 'post',
            data: this.inputForm
          }).then(({data}) => {
            this.loading = false
            if (data && data.success) {
              this.visible = false
              this.$message.success(data.msg)
              this.$emit('refreshDataList')
            }
          })
        }
      })
    },
    audit(id, status) {
      let that = this
      this.$confirm(`确定当前操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$http({
          url: '/reportinfo/tReportInfo/save',
          method: 'post',
          params: { 'id': this.inputForm.id, "auditStatus": status }
        }).then(({ data }) => {
          if (data && data.success) {
            this.visible = false
            this.$message.success(data.msg)
            this.$emit('refreshDataList')
          }
          this.loading = false
        })
      })
    },
    jj(id, status) {
      this.$prompt('请输入拒绝原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (!value){
          this.$message.error("请输入拒绝原因");
          return false
        }
        this.loading = true
        this.$http({
          url: '/reportinfo/tReportInfo/save',
          method: 'post',
          params: { 'id': this.inputForm.id, "auditStatus": status, 'reason': value }
        }).then(({ data }) => {
          if (data && data.success) {
            this.visible = false
            this.$message.success(data.msg)
            this.$emit('refreshDataList')
          }
          this.loading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
  }
}
</script>
